<template>
  <div>
    <!-- <div class="nav">
      <div class="box" :class="{active:id === 1}" @click="id = 1">1</div>
      <div class="box" :class="{active:id === 2}" @click="id = 2">2</div>
      <div class="box" :class="{active:id === 3}" @click="id = 3">3</div>
    </div> -->

    <!-- 排他 -->
    <div class="nav" @click="init($event)">
      <div class="box active">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 1,
      attribute:['box'],
    }
  },
  methods:{
    // 手动排他
    init(e){
      // e.target.parentNode.children，为点击的元素父元素下的所有子元素
      // 遍历每一个同级标签，给类名等于box
      for(let i = 0; i < e.target.parentNode.children.length;i++){

        e.target.parentNode.children[i].classList = ['box']
      }
      // 最后给点击的盒子加上active类名
      e.target.classList = 'box active'
    }
  }
}
</script>

<style>
.nav {
  display: flex;
}
.box {
  width: 100px;
  height: 40px;
  border: 1px solid #000;
}
.active {
  background-color: pink;
}
</style>
